<!-- 抬头表单 -->
<template>
	<view class="form-page">
		<u-form label-position="top" ref="form" :mode='headform' :border-bottom="false">
			<u-form-item label="发票类型" :border-bottom="false">
				<view class="u-flex">
					<view class="radio-btn checked">电子普通发票</view>
				</view>
			</u-form-item>
			<u-form-item label="抬头类型" :border-bottom="false">
				<view class="u-flex">
					<view class="radio-btn" :class="[headform.header_type==1?'checked':'']" @click="headform.header_type=1">个人
					</view>
					<view class="radio-btn " :class="[headform.header_type==2?'checked':'']" @click="headform.header_type=2">企业
					</view>
				</view>
			</u-form-item>
			<template v-if="headform.header_type==1">
				<u-form-item label="发票抬头(必填)" :border-bottom="false">
					<u-input placeholder="请输入个人或您的姓名" :custom-style="customInputStyle" v-model="headform.name"></u-input>
				</u-form-item>
				<u-form-item label="设为默认抬头" :border-bottom="false" label-position="left" label-width="240rpx">
					<view class="align-right">
						<u-checkbox size="40" shape="circle" :active-color="$appConfig.mainColor" v-model="setDetault"></u-checkbox>
					</view>
				</u-form-item>
			</template>
			<template v-else>
				<u-form-item label="发票抬头(必填)" :border-bottom="false">
					<u-input placeholder="请输入发票抬头" :custom-style="customInputStyle" v-model="headform.name"></u-input>
				</u-form-item>
				<u-form-item label="纳税人识别号(必填)" :border-bottom="false">
					<u-input placeholder="请输入纳税人识别号" :custom-style="customInputStyle" v-model="headform.duty_number"></u-input>
				</u-form-item>
				<u-form-item label="公司地址" :border-bottom="false">
					<u-input placeholder="请输入公司地址" :custom-style="customInputStyle" v-model="headform.address"></u-input>
				</u-form-item>
				<u-form-item label="公司电话" :border-bottom="false">
					<u-input placeholder="请输入公司电话" :custom-style="customInputStyle" v-model="headform.tell"></u-input>
				</u-form-item>
				<u-form-item label="公司开户行" :border-bottom="false">
					<u-input placeholder="请输入公司开户行" :custom-style="customInputStyle" v-model="headform.bank"></u-input>
				</u-form-item>
				<u-form-item label="开户行账户" :border-bottom="false">
					<u-input placeholder="请输入开户行账户" :custom-style="customInputStyle" v-model="headform.card_number"></u-input>
				</u-form-item>
				<u-form-item label="设为默认抬头" :border-bottom="false" label-position="left" label-width="240rpx">
					<view class="align-right">
						<u-checkbox size="40" shape="circle" :active-color="$appConfig.mainColor" v-model="setDetault"></u-checkbox>
					</view>
				</u-form-item>
			</template>

		</u-form>
		<view class="submit-btn">
			<u-button type="primary" hover-class="none" shape="circle" :loading="loading" @click="submitForm">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headId: '',
				headform: {
					id: '',
					type: 1,
					header_type: 1,
					name: '',
					duty_number: '',
					address: '',
					tell: '',
					bank: '',
					card_number: '',
					is_default: 0
				},
				customInputStyle: {
					backgroundColor: '#F8F8F8',
					borderRadius: '90rpx',
					padding: '10rpx 30rpx'
				},
				setDetault: false,
				loading: false
			}
		},
		onLoad(e) {
			this.headform.id = e.id || '';
			uni.setNavigationBarTitle({
				title: e.id ? '编辑抬头' : '新增抬头'
			})
			if (e.id) {
				this.getDetail()
			}
		},
		methods: {
			submitForm() {
				this.loading = true;
				this.headform.is_default = this.setDetault ? 1 : 0
				this.$u.api.invoiceSave(this.headform).then(res => {
					this.$u.toast('已保存')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).finally(() => {
					this.loading = false
				})
			},
			getDetail() {
				this.$u.api.invoiceDetail(this.headform.id).then(res => {
					this.setDetault = res.is_default == 1
					Object.keys(this.headform).map(key => {
						this.headform[key] = res[key]
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-page {
		background-color: #fff;
		min-height: 100vh;
		padding: 30rpx;
	}

	.radio-btn {
		width: 230rpx;
		height: 76rpx;
		border-radius: 90rpx;
		background-color: #EFEFEF;
		display: flex;
		place-content: center;
		margin-right: 24rpx;

		&.checked {
			background-color: #ffffff;
			border: 1px solid $u-type-primary;
			color: $u-type-primary;
		}
	}

	.submit-btn {
		padding: 80rpx 30rpx;
	}
</style>